<template>
  <div class="dicManage">
    <div class="top-flex">
      <el-form :model="searchForm" ref="searchFormRef">
        <div class="top-search-flex">
          <el-form-item label="关键字" prop="keyword" class="form-item">
            <el-input
              v-model="searchForm.keyword"
              style="width: 220px"
              clearable
              placeholder="请输入关键字"
            ></el-input>
          </el-form-item>
          <el-form-item label="语言" prop="language" class="form-item">
            <el-select
              v-model="searchForm.language"
              placeholder="请选择"
              style="width: 220px"
            >
              <el-option
                key="CN"
                label="中文"
                value="CN"
              />
              <el-option
                key="EN"
                label="英文"
                value="EN"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="发布状态" prop="state" class="form-item">
            <el-select
              v-model="searchForm.state"
              placeholder="请选择"
              style="width: 220px"
            >
              <el-option
                v-for="item in PublishState"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-button @click="handleQuery" type="primary" plain>查询</el-button>
          <el-button @click="resetQuery" plain>重置</el-button>
          <el-button @click="viewFun(DialogType.add)" type="primary" plain
            >新增</el-button
          >
        </div>
      </el-form>
    </div>
    <el-table
      :data="tableData"
      border
      ref="elTableRef"
      :max-height="tableHeight"
      :header-cell-style="{
        background: '#EEF7F9',
        color: '#333333',
        fontWeight: 'bold',
        height: '50px',
      }"
      class="table"
    >
      <el-table-column
        show-overflow-tooltip
        width="80px"
        label="序号"
        type="index"
        fixed
        :index="tableIndex"
      ></el-table-column>
      <el-table-column
              show-overflow-tooltip
              label="语言"
              prop="language"
              min-width="40px"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="名称"
        prop="title"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="简介"
        prop="description"
      ></el-table-column>
      <el-table-column
              show-overflow-tooltip
              label="发布时间"
              prop="releaseTime"
              min-width="85px"
      >
        <template #default="{ row }">
          {{ row.releaseTime ? moment(row.releaseTime).format("YYYY-MM-DD HH:mm:ss") : "" }}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="发布状态" prop="state">
        <template #default="{ row }">
          <el-tag :type="getPublishState(row.state, true)">{{
            getPublishState(row.state)
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
              show-overflow-tooltip
              label="图片"
              prop="thumbnailUrl"
      >
    <template #default="{row}">
      <el-image :src="row.thumbnailUrl"></el-image>
    </template></el-table-column>
      <el-table-column label="操作" width="240px">
        <template #default="{ row }">
          <div class="table-button-box">
            <el-button
              link
              type="primary"
              @click="viewFun(DialogType.edit, row)"
            >
              <i class="iconfont icon-chakan"></i> 编辑</el-button
            >
            <el-button link type="primary" @click="delFun(row.id)">
              <i class="iconfont icon-chakan"></i> 删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- <div class="pagination-tem" v-show="tableData && tableData.length != 0">
      <el-pagination
        v-model:current-page="pages.current"
        v-model:page-size="pages.size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total"
      >
      </el-pagination>
    </div> -->
    <editDialog
      :formData="editForm"
      :editDialog="dialog"
      :type="dialogType"
      @changeDialog="changeDialog"
      @getListFun="getListFun"
    ></editDialog>
  </div>
</template>

<script>
import { reactive, onMounted, toRefs } from "vue";
import editDialog from "./components/editDialog.vue";
import { DialogType, PublishState } from "@/utils/types";
import { searchApi, getApi, deleteApi } from "@/api/award";
import { ElMessage, ElMessageBox } from "element-plus";
import moment from "moment";
export default {
  name: "dicManage",
  components: { editDialog },
  setup(props, context) {
    const state = reactive({
      searchForm: {
        keyword: "",
      },
      pages: {
        current: 1,
        total: 0,
        size: 10,
      },
      tableData: [],
      editForm: {},
      searchFormRef: null,
      dialog: false,
      dialogType: 1,
      elTableRef: null,
      tableHeight: 0,
    });
    onMounted(() => {
      getListFun();
      // 设置表格初始高度为 innerHeight-offsetTop - 表格底部与浏览器底部距离：68 + 顶部固定高度：50
      state.tableHeight =
        window.innerHeight - state.elTableRef.$el.offsetTop - 30;
      // 监听浏览器高度变化
      window.onresize = () => {
        state.tableHeight =
          window.innerHeight - state.elTableRef.$el.offsetTop - 30;
      };
    });
    const tableIndex = (index) => {
      return (state.pages.current - 1) * state.pages.size + index + 1;
    };
    //列表
    const getListFun = () => {
      let params = {
        ...state.searchForm,
        // ...state.pages
      };
      console.log(params, "params");

      searchApi(params).then((res) => {
        console.log(res);
        state.tableData = res.value;
        // state.pages.current = res.data.current ? Number(res.data.current) : 0;
        // state.pages.total = res.data.total ? Number(res.data.total) : 0;
      });
    };
    //下载图片
    const downloadPic = (row) => {
      window.open(
        `${process.env.VUE_APP_BASE_API}/admin/sx/ist/alarm/downloadImg/${row.id}`
      );
    };
    const changeQybh = (e) => {
      if (e) {
        dzsbListApi(e).then((res) => {
          state.dzbhList = res.data;
        });
      } else {
        state.dzbhList = [];
      }
    };
    const viewFun = (type, row) => {
      state.dialogType = type;
      if (type != DialogType.add) {
        getApi(row.id).then(({ value }) => {
          state.editForm = JSON.parse(JSON.stringify(value));
          state.dialog = true;
        });
      } else {
        state.editForm = {};
        state.dialog = true;
      }
    };
    /**
     * 分页
     */
    const handleSizeChange = () => {
      state.pages.current = 1;
      getListFun();
    };
    // 当前页面改变
    const handleCurrentChange = (val) => {
      state.pages.current = val;
      getListFun();
    };
    /** 搜索按钮操作 */
    const handleQuery = () => {
      state.pages.current = 1;
      getListFun();
    };
    /** 重置按钮操作 */
    const resetQuery = () => {
      resetForm(state.searchFormRef);
      state.pages.current = 1;
      getListFun();
    };
    //重置form
    const resetForm = (formEl) => {
      if (!formEl) return;
      formEl.resetFields();
      state.dzbhList = [];
      state.dataRange = [];
    };
    const changeDialog = (e) => {
      state.dialog = e;
    };
    const changeAlarmDealDialog = (e) => {
      state.alarmDealDialog = e;
    };
    const getPublishState = (id, style = false) => {
      if (style) {
        return PublishState.find((e) => e.id === id).style;
      }
      return PublishState.find((e) => e.id === id).name;
    };
    const delFun = (id) => {
      ElMessageBox.confirm("是否确认删除本条数据?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteApi(id).then((res) => {
            ElMessage({
              type: "success",
              message: "删除成功",
            });
            getListFun();
          });
        })
        .catch(() => {});
    };
    return {
      ...toRefs(state),
      getListFun,
      tableIndex,
      viewFun,
      handleSizeChange,
      handleCurrentChange,
      handleQuery,
      resetQuery,
      changeDialog,
      changeAlarmDealDialog,
      changeQybh,
      downloadPic,
      getPublishState,
      DialogType,
      delFun,
      moment,
      PublishState,
    };
  },
};
</script>
<style scoped lang="scss">
.pagination-tem {
  margin-top: 10px;
}
</style>
